<template>
  <div>
    <el-button @click="onClick()">打开</el-button>

    <el-dialog :title="title" v-model="dialogFormVisible">
      <!-- 
        title 标题
        dialogVisible  显示隐藏
      -->

      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="Activity count" prop="count">
          <el-select-v2
            v-model="ruleForm.count"
            placeholder="Activity count"
            :options="options"
          />
        </el-form-item> -->
        <el-form-item label="活动时间" required>
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker
                v-model="ruleForm.date1"
                type="date"
                label="Pick a date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col class="text-center" :span="2">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                v-model="ruleForm.date2"
                label="Pick a time"
                placeholder="选择时间"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="ruleForm.delivery" />
        </el-form-item>
        <!-- <el-form-item label="Activity location" prop="location">
          <el-segmented
            v-model="ruleForm.location"
            :options="locationOptions"
          />
        </el-form-item> -->
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox value="Online activities" name="type">
              美食/餐厅线上活动
            </el-checkbox>
            <el-checkbox value="Promotion activities" name="type">
              地推活动
            </el-checkbox>
            <el-checkbox value="Offline activities" name="type">
              线下主题活动
            </el-checkbox>
            <el-checkbox value="Simple brand exposure" name="type">
              单纯品牌曝光
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio value="Sponsorship">线上品牌商赞助</el-radio>
            <el-radio value="Venue">线下场地免费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <div style="width: 100%; text-align: center">
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交</el-button
            >
            <el-button @click="setdialogVisible('ruleForm')">关闭</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";

interface RuleForm {
  name: string;
  region: string;
  // count: string;
  date1: string;
  date2: string;
  delivery: boolean;
  // location: string;
  type: string[];
  resource: string;
  desc: string;
}
const title = ref("标题");
const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  region: "",
  // count: "",
  date1: "",
  date2: "",
  delivery: false,
  // location: "",
  type: [],
  resource: "",
  desc: "",
});

// const locationOptions = ["Home", "Company", "School"];

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输入活动名称！", trigger: "blur" },
    { min: 3, max: 8, message: "请输入 3 到 8 个字！", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "请选择活动区域！",
      trigger: "change",
    },
  ],
  // count: [
  //   {
  //     required: true,
  //     message: "Please select Activity count",
  //     trigger: "change",
  //   },
  // ],
  date1: [
    {
      type: "date",
      required: true,
      message: "请选择日期！",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "请选择时间！",
      trigger: "change",
    },
  ],
  // location: [
  //   {
  //     required: true,
  //     message: "Please select a location",
  //     trigger: "change",
  //   },
  // ],
  type: [
    {
      type: "array",
      required: true,
      message: "请选择活动性质！",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "请选择资源！",
      trigger: "change",
    },
  ],
  desc: [{ required: true, message: "请输入活动形式！", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(valid, ruleForm, "submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// const options = Array.from({ length: 10000 }).map((_, idx) => ({
//   value: `${idx + 1}`,
//   label: `${idx + 1}`,
// }));

// 打开弹窗
const dialogFormVisible = ref(false);
const onClick = () => {
  dialogFormVisible.value = true;
};

// 关闭弹窗
const setdialogVisible = () => {
  dialogFormVisible.value = !dialogFormVisible.value;
};
</script>


<style lang="scss" scoped>
//el-dialog圆角样式
.el-dialog {
  border-radius: 30px;
}
</style>